<template>
	<view class="content">
		<view class="pageHeader">
			{{title}}
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view style="padding-top: 178upx;">
			<view v-if="goodslist.length===0" class="empty">
				<image src="/static/empty.png" mode="widthFix"></image>
				<view class="empty-tips">
					暂无商品，随便逛逛~
				</view>
			</view>
			<!-- 热门推荐 -->
			<view style="min-height: 60vh;">
				<view style="padding: 20upx 30upx;display: flex;flex-wrap: wrap;" class="hot-goodbox"> 
					<view class="gooditem" v-for="(item,index) in goodslist" :key="index" @click="godetial(item.id)">
						<view>
							<image :src="item.images"  style="height: 288upx;width:100%;border-radius: 20upx 20upx 0 0 ;"></image>
						</view>
						<view style="padding: 14upx;">
							<view class="goodtitle">{{item.title}}</view>
							<view style="color: #EC6104;font-size: 26upx;margin: 8upx 0;">{{item.price}}</view>
							<view style="color: #999;font-size: 22upx;text-decoration: line-through;">{{item.original_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
			

</template>
<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				title:'',// 头部的标题
				pageindex:0,
				goodslist:{},
			}
		},
		onLoad(options) {
			let that = this
			that.title = options.name
			that.get_cate_list(options.id)
		},
		methods: {
			// 返回上一页面
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 去详情页
			// 跳转到详情页
			godetial(id){
				uni.navigateTo({
					url:"../order/detail?id="+id
				})
			},
			// 获取分类产品
			get_cate_list(id){
				let that = this
				postAjax('Goods/GoodsCategoryList',{category_id:id,m:that.pageindex,n:8},function(data){
					 console.log(data)
					if(data.code==0){
						that.goodslist = data.data
					}else{
						that.get_cate_list()
					}
					
				})
			}
		}
	}
</script>

<style>
.borderox{border-top:2upx solid #eee}
.content {min-height: 100vh;position: relative;background-color: #f5f5f5;}
.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;
	height: 128upx;background-color:#1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
.flex-1{flex:1}
.gooditem{background-color: #fff;color: #fff;font-size: 28upx;border-radius: 20upx;width: 48%;margin-bottom: 20upx;}
.hot-goodbox>.gooditem:nth-child(2n+2){margin-left:4%;}
.goodtitle{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #333;}
.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

	}
	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}

	.empty-tips {
		display: flex;
		font-size:30upx;
		color: #666;

	}
</style>

